<template>
  <scroll-view
    class="detail"
    :scroll-y="!dateObj.show"
  >
    <view class="banner">
      <my-swiper
        :img-list="detail.images"
        :height="252"
      />
    </view>
    <view class="card">
      <h1>{{ detail.name || '' }}</h1>
      <p class="title font-12 color-555">
        {{ detail.description || '' }}
      </p>
      <view class="flex">
        <view class="tagList">
          <view
            v-show="detail.hot==='Y'"
            class="item"
          >
            精选推荐
          </view>
          <view
            v-for="(item,index) in detail.tag"
            :key="index"
            class="item"
          >
            {{ item.name || '' }}
          </view>
        </view>
      </view>
      <view class="flex">
        <view
          v-show="detail.price"
          class="start-price"
        >
          {{ detail.price }}
        </view>
        <view class="font-11">
          {{ detail.buyMinNumber || '' }}~{{ detail.buyMaxNumber || '' }}人起订　
          <span
            class="color-999"
            style="margin-left:10px"
          >销量：{{ detail.sellNumber || '0' }}</span>
        </view>
      </view>
    </view>
    <view class="contain">
      <ul class="skusInfo">
        <li
          v-for="(item,index) in detail.dayPrices"
          :key="index"
          :class="item.stockDate===chooseDetail.date?'active':''"
          @click="skusChange(item)"
        >
          <view class="month">
            {{ item.month || '' }}
          </view>
          <p class="day">
            {{ item.day || '' }}
          </p>
          <p class="font-10 color-999">
            {{ item.week || '' }}
          </p>
          <view class="price">
            {{ item.price ? '￥' + item.price : '' }}
          </view>
        </li>
      </ul>
      <view
        class="more"
        @click="more"
      >
        <view>
          <p>更多</p>
          <p>日期</p>
        </view>
        <uni-icons
          type="arrowright"
          color="#CCC"
          :size="12"
          style="margin-left:5px"
        />
      </view>
    </view>
    <view class="tab">
      <view
        :class="current===0?'item s':'item'"
        @click="current=0"
      >
        行程介绍
      </view>
      <view
        :class="current===1?'item s':'item'"
        @click="current=1"
      >
        购买须知
      </view>
    </view>
    <view
      v-show="current===0"
      class="content"
    >
      <p class="title">
        行程介绍
      </p>
      <u-parse :content="detail.intro" />
    </view>
    <view
      v-show="current===1"
      class="content"
    >
      <p class="title">
        购买须知
      </p>
      <u-parse :content="detail.costIntro" />
    </view>
    <!-- <view class="remark">
      <p class="title">
        费用说明
      </p>
      <u-parse :content="detail.costIntro" />
    </view> -->
    <view class="foot">
      <view
        class="tel"
        @click="callTel"
      >
        <image
          :src="require('@/static/route/tel.png')"
          class="img"
        />
        <p>
          联系商家
        </p>
      </view>
      <!-- dateObj.show=true -->
      <view
        class="btn"
        @click="submit"
      >
        立即预定
      </view>
    </view>
    <!-- 日历组件 -->
    <my-calendar
      ref="myCalendar"
      :value="dateObj.show"
      pattern="single"
      :range="dateObj.range"
      :info="dateObj.info"
      @choose-day="chooseDay"
      @chang-month="changeMonth"
      @on-close="close"
      @on-determine="confirm"
    >
      <view
        slot="number"
        class="number"
      >
        <span class="text">出行人数</span>
        <uni-number-box
          :min="chooseDetail.min"
          :max="chooseDetail.stock"
          :value="member"
          @change="changeNumber"
        />
      </view>
    </my-calendar>
  </scroll-view>
</template>

<script>
	import myCalendar from '@/components/calendar/index.vue';
	import uniIcons from '@/components/uni-icons/uni-icons.vue';
	import uParse from '@/components/gaoyia-parse/parse.vue';
	import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue';
  import 'dingtalk-jsapi/entry/mobile';
  import openLink from 'dingtalk-jsapi/api/biz/util/openLink';

	import {
		getCnTime
	} from '@/common/js/dictionary.js';
	import moment from 'dayjs';
	export default {
		components: {
			uniIcons,
			uParse,
			uniNumberBox,
			myCalendar
		},
		data() {
			return {
				current: 0,
				detail: {
					content: '111',
					images: [],
					price: 0,
          dayPrices: []
				},
				member: 0,
				//日历
				chooseDetail: {
					stock: 0,
					saleSettlementPrice: '',
					date: '',
          min: 1,
          max: 99
				},
				dateObj: {
					info: {
						checkInDate: ''
					},
					range: [],
					show: false
				},
				id: ''
				
			};
		},
		onShareAppMessage() {
			return {
			title: `${this.detail.name}`,
			path: `/productPages/route/detail?id=${this.id}`,
			desc: `${this.detail.name}`,
			imageUrl:`${this.detail.logoImage}`
			}
        },
		onLoad(e) {
			this.id = e.id;
			this.queryData();
			this.queryCalendar();
		},
		methods: {
			queryData() {
				this.$ajax({
					method: 'get',
					url: '/outing/mobile/line/queryById',
					data: {
						id: this.id
					}
				}).then(res => {
          if (res.data) {
            res.data.tag = res.data.tag ? JSON.parse(res.data.tag) : [];
            res.data.dayPrices.forEach((element) => {
              let time = getCnTime(element.stockDate);
              element.month = time.cnMonth;
              element.day = time.day;
              element.week = time.cnWeek;
            });
            this.detail = res.data;
          }
				});
			},
			queryCalendar(date) {
        console.log('获取价格日历date', date, moment(date).format('YYYY-MM-DD'));
				this.$ajax({
					method: 'get',
					url: '/outing/mobile/line/price/listByMonth',
					data: {
						date: moment(date).format('YYYY-MM-DD') || moment().format('YYYY-MM-DD'),
						lineId: this.id
					}
				}).then(res => {
					this.dateObj.range = res.data.map(t => {
						return {
							...t,
							date: t.stockDate,
							saleSettlementPrice: t.price,
							stock: t.stock
						};
					});
				});
			},
			more() {
				this.dateObj.show = true;
			},
			changeMonth(e) {
				this.queryCalendar(e + '-01');
			},
			changeNumber(val) {
				this.member = val;
			},
      //sku日历选中
			skusChange(item) {//此功能先阉割掉
        return;
        // console.log(item)
				// this.chooseDetail = {
				// 	date: item.stockDate,
				// 	saleSettlementPrice: item.price,
				// 	stock: item.stock > item.buyMaxNumber ? item.buyMaxNumber:item.stock,
        //   min:item.buyMinNumber
				// };
				// this.dateObj.info.checkInDate = item.stockDate;
			},
      //日历选中
			chooseDay(item) {
				console.log('选择了日期', item);
				this.chooseDetail = {
					date: item.checkInDate,
					saleSettlementPrice: item.saleSettlementPrice,
					stock: item.stock,
          min: item.min,
          max: item.max
				};
				// 重置member
				this.member = 1;
			},
			close() {
				this.dateObj.show = false;
			},
			confirm() {
				if (this.chooseDetail && this.chooseDetail.stock) {
					this.dateObj.show = false;
					// 保存订单信息
					this.$store.commit('changeOrderInfo', {
						lineDetail: this.detail,
						orderDetail: {
							...this.chooseDetail,
							member: this.member
						}
					});
					this.$jumpUrl(`/productPages/route/order?id=${this.id}`);
				} else {
					uni.showToast({
						title: '请先选择出行日期',
						icon: 'none'
					});
				}
			},
			submit() {
				this.dateObj.show = true;
				// uni.showToast({
				// 	title:'下单功能暂未开放，敬请期待！',
				// 	icon:'none'
				// });
			},
			callTel() {
        const goodsCode = 'DT_GOODS_881628238440130'; // 力马嗨的商品码
        const token = '407da8366b05721295133e7c6d088527'; // 开发后台中应用运营-商品上架-服务群配置
        const corpId = dd.corpId;
        if(!corpId) return;
        const url = encodeURI(`https://page.dingtalk.com/wow/dingtalk/act/serviceconversation?wh_biz=tm&showmenu=false&goodsCode=${goodsCode}&corpId=${corpId}&token=${token}`);
        openLink({
          url,
          onSuccess: (res) => {
            console.log('跳转成功', res);
          },
          onFail: function (err) {
            console.log('跳转失败', err);
          }
        });
				// dd.showCallMenu({
				//   phoneNumber: 13018998305, // 期望拨打的电话号码
				//   showDingCall: false, // 是否显示钉钉电话
				// });
			},
      // 这里是打开的是智能云客中服配置的聊天窗口
      openTalk() {
        const url = encodeURI('https://cschat.antcloud.com.cn/index.htm?tntInstId=57i_9JSS&scene=SCE01201006');
        openLink({
          url,
          onSuccess: (res) => {
            console.log('跳转成功', res);
          },
          onFail: function (err) {
            console.log('跳转失败', err);
          }
        });
      }
		}
	};
</script>

<style lang="less" scoped>
	
	.detail {
		height: 100vh;
		background: #F7F9FB;

		.number {
			margin: 6upx 0 0 30upx;

			.text {
				margin-right: 10upx;
			}
		}

		.foot {
			height: 170upx;
			padding: 20upx 30upx 0 80upx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			background: #FFF;
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;

			.tel {
				.img {
					width: 40upx;
					height: 40upx;
				}

				line-height: 40upx;
				font-size: 22upx;
				text-align: center;
			}

			.btn {
				width: 300upx;
				height: 82upx;
				background: linear-gradient(135deg, #F78833 0%, #FFC77B 100%);
				border-radius: 41upx;
				text-align: center;
				line-height: 82upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
			}
		}

		.remark {
			margin-top: 20upx;
			padding: 30upx;
			background: #FFF;
		}

		.content {
			position: relative;
			background: #FFF;
			min-height: 100upx;
			border-radius: 20upx 20upx 0px 0px;
			padding: 30upx;
			padding-bottom: 190upx;
		}

		.remark,
		.content {
			.title {
				font-size: 34upx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				margin-bottom: 20upx;
				color: #333333;
			}
		}

		.banner {
			width: 100%;
			height: 265px;
			// height: 504upx;
			position: relative;
			margin-bottom: -40upx;

			.img {
				width: 100%;
				height: 504upx;
			}
		}

		.tab {
			width: 100%;
			height: 90upx;
			background: linear-gradient(90deg, #B7C4E1 0%, #D6DEF3 100%);
			padding-top: 14upx;
			position: relative;
			margin: 20upx 0 -30upx 0;

			.item {
				margin: 0 20upx 0 30upx;
				font-size: 26upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				float: left;
				position: relative;

				&.s {
					&::after {
						content: '';
						width: 40upx;
						height: 6upx;
						background: #FFFFFF;
						border-radius: 3upx;
						position: absolute;
						left: 30%;
						bottom: -18upx;
					}
				}
			}
		}

		.contain {
			height: 250upx;
			overflow: hidden;
			position: relative;

			.more {
				width: 130upx;
				height: 164upx;
				background: #FFF;
				position: absolute;
				right: 0;
				top: 50upx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 22upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #555555;
				line-height: 34upx;
				box-shadow: -4px 0 5px 0px #f1f1f1;
			}
		}

		.skusInfo {
			background: #FFF;
			padding: 30upx 150upx 30upx 30upx;
			margin: 20upx 0;
			height: 280upx;
			overflow-x: scroll;
			white-space: nowrap;

			li {
				width: 115upx;
				background: #FFFFFF;
				border-radius: 8upx;
				overflow: hidden;
				border: 2upx solid #EEEEF7;
				text-align: center;
				display: inline-block;
				margin-right: 10upx;

				&.active {
					border: 1px solid #FF4D00;
				}

				.month {
					height: 38upx;
					line-height: 38upx;
					background: #EEEEF7;
					font-size: 20upx;
				}

				.day {
					font-size: 28upx;
					font-family: Arial-BoldMT, Arial;
					font-weight: normal;
					color: #35384D;
					line-height: 32upx;
					margin: 10upx 0;
				}

				.price {
					font-size: 26upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF4D00;
					margin: 10upx 0;
					height: 27upx;
				}
			}
		}

		.card {
			position: relative;
			width: 100%;
			background: #FFF;
			padding: 30upx;
			box-sizing: border-box;
			border-radius: 24upx 24upx 0 0;

			h1 {
				font-size: 32upx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 40upx;
				margin: 0 0 14upx 0;
			}

			.title {
				line-height: 40upx;
			}

			.tagList {
				overflow: hidden;
				margin: 14upx 0;

				.item {
					display: inline-block;
					margin: 0 10upx 10upx 0;
					padding: 6upx 14upx;
					background: #FEF2E7;
					border-radius: 4upx;
					font-size: 20upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FE7D15;
				}
			}

			.flex {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
			}

			.start-price {
				&:after {
					color: #FF4D00;
					content: '/人'
				}
			}
		}
	}
</style>
